<template>
	<view>
		<view class="container">
			<view class="row list-item" @click="updateHead">
				<text style="font-size: 36rpx;">头像</text>
				<image style="margin-left: auto;margin-right: 50rpx;width: 80rpx;height: 80rpx;border-radius: 50%;"
					:src="userInfo.wxHeadimgurl||userAvatar" mode=""></image>
				<view class="" style="width: 30rpx;height: 30rpx;right: 0rpx;">
					<zywork-icon type="icon-youjiantou1" size="30" color="#afafaf "></zywork-icon>
				</view>
			</view>
			<view class="row list-item" @click="$refs.updateName.open()">
				<text style="font-size: 36rpx;">昵称</text>
				<text style="color: #a7a7a7;margin-left: auto;margin-right: 50rpx;">{{userInfo.wxNickname||'暂无'}}</text>
				<view class="" style="width: 30rpx;height: 30rpx;right: 0rpx;">
					<zywork-icon type="icon-youjiantou1" size="30" color="#afafaf "></zywork-icon>
				</view>
			</view>
			<view class="row list-item">
				<text style="font-size: 36rpx;">性别</text>
				<picker style="margin-left: auto;margin-right: 50rpx;" @change="bindPickerChange" :value="userInfo.wxSex"
					:range="array">
					<view style="color: #a7a7a7;" class="uni-input">{{array[userInfo.wxSex]}}</view>
				</picker>
				<view class="" style="width: 30rpx;height: 30rpx;right: 0rpx;">
					<zywork-icon type="icon-youjiantou1" size="30" color="#afafaf "></zywork-icon>
				</view>
			</view>
			<view class="row list-item">
				<text style="font-size: 36rpx;">地区</text>
				<view class="" style="margin-left: auto;margin-right: 50rpx;">
					<!-- <regionPicker
					  :multiIndex_="provinceCity"
					  @selecteRegion_="selecteProvinceCity"
					  color="#afafaf"
					  :column_="2"
					/> -->
					<picker style="margin-left: auto;" mode="multiSelector" :range="newProvinceDataList"
						:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
						<!-- <view>{{provinceDataList[0].name}}--{{provinceDataList[0].city[0].name}}--{{provinceDataList[0].city[0].area[0]}}</view> -->
						<view class="" style="color: #afafaf;">{{select}}</view>
					</picker>

				</view>

				<view class="" style="width: 30rpx;height: 30rpx;right: 0rpx;">
					<zywork-icon type="icon-youjiantou1" size="30" color="#afafaf "></zywork-icon>
				</view>
			</view>
		</view>
		<uni-popup ref="updateName" type="center">
			<view class="column"
				style="width: 600rpx;border-radius: 35rpx;background-color: #FFFFFF;padding: 30rpx 30rpx;">
				<view class="" style="text-align: center;padding: 25rpx 0rpx;border-bottom: solid 1rpx #eee;">
					{{userInfo.wxNickname||'暂无'}}
				</view>
				<view class="" style="padding: 30rpx 0rpx;">
					<input v-model="userInfo.wxNickname" type="text" placeholder="昵称不可超过15个字符" />
				</view>
				<view class="row" style="align-items: center;">
					<text style="margin-left: auto;" @click="$refs.updateName.close()">取消</text>
					<text style="margin-left: 80rpx;color: #44AEF4;" @click="updateInfo({wxNickname:userInfo.wxNickname})">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import regionPicker from "@/components/region-picker/region-picker";
	import {
		genderArray,
		sourceType,
		sizeType
	} from '@/common/picker-data.js'
	export default {
		components: {
			regionPicker,
		},
		data() {
			return {
				array: genderArray,
				index: 1,
				sourceTypeIndex: 2,
				sizeTypeIndex: 2,
				userAvatar: "/static/user-my.jpg",
				provinceCity: [],

				oldpProvinceDataList: "",
				newProvinceDataList: [
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '选择省市区',

				addressData: {
					name: '',
					phone: '',
					address: ''
				},
				binhao: '1',
				userInfo:""
			};
		},
		created() {
			// console.log(this.oldpProvinceDataList);
			this.oldpProvinceDataList = uni.getStorageSync(this.$util.PROVINCE)
			for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
				// console.log(this.oldpProvinceDataList[i].name);
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].cnName);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].list.length; i++) {
				// console.log(this.oldpProvinceDataList[0].city[i].name)
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].list[i].cnName);
			}
			// for (let i = 0; i < this.oldpProvinceDataList[0].list[0].list.length; i++) {
			// 	// console.log(this.oldpProvinceDataList[0].city[0].area)
			// 	this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].list[0].list[i].cnName);
			// }
			// console.log(this.newProvinceDataList)
			
		},
		onShow() {
			this.userInfo = uni.getStorageSync(this.$util.USER_INFO)
			if(this.userInfo.wxProvince){
				this.select = this.userInfo.wxProvince+"-"+this.userInfo.wxCity
			}
		},
		onBackPress() {
			
		},
		methods: {
			updateInfo(parameter) {
				console.log("修改成功",parameter)
				this.$util.doPostJson('/user/manager/edit',parameter, {}, true).then(res => {
					console.log(res.data)
					if(res.data.code == this.$ResponseStatus.OK){
						for (let key in parameter) {
						    console.log(key);     //获取key值
							this.userInfo[key]=parameter[key]
						}
						uni.setStorageSync(this.$util.USER_INFO,this.userInfo)
						this.$refs.updateName.close();
						this.$util.showInfoToast(res.data.data)
					}
				}).catch(error => {
					console.log(error)
				})	
			},
			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// console.log(this.multiIndex);
				// 获取省
				// console.log(this.newProvinceDataList[0][this.multiIndex[0]])
				// 获取市
				// console.log(this.newProvinceDataList[1][this.multiIndex[1]])
				// 获取区
				// console.log(this.newProvinceDataList[2][this.multiIndex[2]])
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]]}-${this.newProvinceDataList[1][this.multiIndex[1]]}`
					// --${this.newProvinceDataList[2][this.multiIndex[2]]}
				this.updateInfo({wxProvince:this.newProvinceDataList[0][this.multiIndex[0]],wxCity:this.newProvinceDataList[1][this.multiIndex[1]]})
			},
			pickerColumnchange(e) {
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].list.map((item, index) => {
						// console.log(item)
						return item.cnName
					})
					// console.log(this.multiIndex)
					// if (this.oldpProvinceDataList[this.multiIndex[0]].list.length === 1) {
					// 	this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].list[0].list.map((item,
					// 		index) => {
					// 		// console.log(item)
					// 		return item
					// 	})
					// } else {
					// 	this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].list[this.multiIndex[
					// 		1]].list.map((item, index) => {
					// 		// console.log(item)
					// 		return item
					// 	})
					// }
					// 第一列滑动  第二列 和第三列 都变为第一个
					// this.multiIndex.splice(1, 1, 0)
					// this.multiIndex.splice(2, 1, 0)
					
					this.multiIndex.splice(1, 1)
					this.multiIndex.splice(2, 1)
				}
				// 第二列滑动
				// if (e.detail.column === 1) {
				// 	this.multiIndex[1] = e.detail.value
				// 	// console.log('第二列滑动');
				// 	// console.log(this.multiIndex)
				// 	this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].list[this.multiIndex[1]]
				// 		.list.map((item, index) => {
				// 			return item.cnName
				// 		})
				// 	// 第二列 滑动 第三列 变成第一个
				// 	// this.multiIndex.splice(2, 1, 0)
				// 	this.multiIndex.splice(2, 1)
				// }
				// 第三列滑动
				// if (e.detail.column === 2) {
				// 	this.multiIndex[2] = e.detail.value
				// 	// console.log('第三列滑动')
				// 	// console.log(this.multiIndex)
				// }
			},
			selecteProvinceCity(value) {
				console.log(value)
				this.provinceCity = value;
			},
			
			//性别
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.userInfo.wxSex = e.target.value
				this.updateInfo({wxSex:this.userInfo.wxSex})
			},
			/**
			 * 更换头像
			 */
			updateHead: async function() {
				var myThis = this;
				// const userToken = uni.getStorageSync(USER_TOKEN_KEY);
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: 1,
					crop: {},
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						uni.navigateTo({
							url: "/pages/user/user-update/picture-processing?imgUrl=" +
								tempFilePaths[0]
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx 30rpx;

		.list-item {
			padding: 30rpx 0rpx;
			border-bottom: solid 1rpx #eee;
			align-items: center;
		}
	}
</style>
